<template>
    <div ref='content'>
        <v-toolbar dark color="primary" style="box-shadow:none;margin-bottom:10px;position:fixed;top:0;z-index:1">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title style="margin:0">{{contactUser}}</v-toolbar-title>
            <v-icon style="position:absolute;right:0;margin-right:16px;"></v-icon>
        </v-toolbar>
        <div style="margin-top:66px"></div>
        <v-layout row wrap v-for="(value,index) in messages" :key=index :class="{receiveMessage:value.type=='receive',sendMessage:value.type=='send'}">
            
            <v-flex xs2 style="margin:0 10px" v-if="value.type=='receive'">
                <img style="border-radius:50%;height:50px;width:50px;" src="../assets/avatar.jpg">
            </v-flex>
            <v-flex xs9 v-if="value.type=='receive'">
                <v-textarea solo rows=1 auto-grow readonly :value='value.content'></v-textarea>
            </v-flex>
            
            <v-flex xs9 style="margin:0" v-if="value.type=='send'">
                <v-textarea solo rows=1 auto-grow readonly id='mes' :value='value.content'></v-textarea>
            </v-flex>
            <v-flex xs2 style="margin:0 10px" v-if="value.type=='send'">
                <img style="border-radius:50%;height:50px;width:50px;" src="../assets/avatar.jpg">
            </v-flex>
            
        </v-layout>

        <div flat style="z-index:1;position:fixed;bottom:0;width:100%;background:white" ref='bottom'>
            <v-divider></v-divider>
            <v-layout row wrap style="margin-top:10px">
                <v-flex xs10 text-xs-center>
                    <div style="padding-left:10px">
                        <textarea class="sendArea" rows="1" @keyup="changeRow" ref="sendArea"></textarea>
                    </div>
                </v-flex>
                <v-flex xs2 text-xs-center>
                    <span style="color:#4caf50;" @click="send">发送</span>
                </v-flex>
            </v-layout>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        return {
            contactUser:this.$route.params.contact,
            messages:[
                {content:'你好',send:true,type:'send'},
                {content:'hi',send:false,type:'receive'},
                {content:'将自定义字符掩码应用于输入框。有关更多信息，请参阅上面的掩码表格.',type:'send'},
                {content:'emmmm',type:'receive'},
                {content:'将自定义字符掩码应用于输入框。有关更多信息，请参阅上面的掩码表格.',type:'send'},
                {content:'emmmm',type:'receive'},
                {content:'将自定义字符掩码应用于输入框。有关更多信息，请参阅上面的掩码表格.',type:'send'},
                {content:'emmmm',type:'receive'},
                {content:'将自定义字符掩码应用于输入框。有关更多信息，请参阅上面的掩码表格.',type:'send'},
                {content:'emmmm',type:'receive'},
            ],
        }
    },
    methods:{
        changeRow(){
            var textarea=this.$refs['sendArea']
            textarea.style.height='auto'
            if(textarea.scrollHeight<130)
                textarea.style.height=textarea.scrollHeight+'px'
            else
                textarea.style.height='108px'
            this.handleScroll()
        },
        handleScroll(){
            var bottom=this.$refs['bottom']
            var content=this.$refs['content']
            content.style.paddingBottom=bottom.scrollHeight+'px'
            document.body.scrollTop=document.body.offsetHeight-window.innerHeight+100
        },
        send(){
            var sendArea=this.$refs['sendArea']
            this.messages.push({content:sendArea.value,type:'send'})
            sendArea.value=''
            this.changeRow()
        }
    },
    mounted() {
        this.handleScroll()
    },
}
</script>

<style scoped>
.sendArea{
    width: 100%;
    padding: 10px 15px;
    border-radius: 25px;
    border:solid 1px #eeeeee;
    font-size:15px;
    outline:none;
    overflow: hidden;
    resize: none;
}
.sendMessage{
    float: right;
}
.receiveMessage{
    float: left;
}
</style>

